// import { useState } from 'react'
// import reactLogo from './assets/react.svg'
// import viteLogo from '/vite.svg'
import React from 'react'
import './App.css'
import axios from 'axios'

class App extends React.PureComponent{
  state = {
    val: '',
    data: []
  }

  change = (e) => {
    this.setState({
      val: e.target.value
    })
  }

  search = () => {
    axios.get("/api/search",{
      params: {
        keyword: this.state.val,
        num:10,
        start:0,
        appkey:"8d0f657889eb41cb"
      }
    }).then(res=>{
      this.setState({
        data: res.data.result.list
      })
    }).catch(err=>console.log(err))
  }
  render(){
    let {val, data} = this.state
    return (
      <div>
        <input placeholder='请输入要搜索的菜谱' value={val} onChange={this.change} onBlur={this.search} type="text" />
        <ul>
          {data.map(item=>
            <li key={item.id}>
              <h1>{item.name}</h1>
              <img src={item.pic} alt="" />
              {
                item.material.map((value,idx)=>
                  <p key={idx}>
                    {value.mname}:{value.amount}
                  </p>)
              }
            </li>
          )}
        </ul> 
      </div>
    )
  }
}

// function App() {
//   const [count, setCount] = useState(0)

//   return (
//     <>
//       <div>
//         <a href="https://vite.dev" target="_blank">
//           <img src={viteLogo} className="logo" alt="Vite logo" />
//         </a>
//         <a href="https://react.dev" target="_blank">
//           <img src={reactLogo} className="logo react" alt="React logo" />
//         </a>
//       </div>
//       <h1>Vite + React</h1>
//       <div className="card">
//         <button onClick={() => setCount((count) => count + 1)}>
//           count is {count}
//         </button>
//         <p>
//           Edit <code>src/App.jsx</code> and save to test HMR
//         </p>
//       </div>
//       <p className="read-the-docs">
//         Click on the Vite and React logos to learn more
//       </p>
//     </>
//   )
// }

export default App
